<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>维修记录</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css">
    <link rel="stylesheet" href="${frames}/css/record.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/picker.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/modalContent.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/fancybox1/source/jquery.fancybox.css" type="text/css" media="screen">
    <script src="${newframe}/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="${newframe}/js/respond.js" type="text/javascript"></script>
    <script type="text/javascript" src="${frames}/js/lib/bootstrap.min.js"></script>
    <script src="${frames}/js/lib/metisMenu.js"></script>
    <script src="${frames}/js/lib/jquery.dataTables.js" type="text/javascript"></script>
    <script src="${frames}/js/lib/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="${frames}/js/lib/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="${frames}/js/lib/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script src="${newframe}/base/base.js"></script>
    <script src="${newframe}/js/modalOption.js"></script>
    <script type="text/javascript" src="${newframe}/fancybox1/lib/jquery.mousewheel-3.0.6.pack.js"></script>

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="${newframe}/fancybox1/source/jquery.fancybox.js"></script>	
    <script>
      function addRepair(){
    	  var instrumentId="${instrumentId}";
		  window.showModelIframe("${URL_QULITITY_TOUPDATEREPAIR}?method=1&instrumentId="+instrumentId,"详细内容",800,400);
	  }
	  function updateRepair(){
		  var instrumentId="${instrumentId}";
		  var checkedArray = getCheckedArray();
	      if(checkedArray.length!=1){
	    	  alert("请勾选一条数据修改");
	    	  return;
	      }
		  window.parent.showModelIframe("${URL_QULITITY_TOUPDATEREPAIR}?id="+checkedArray[0]+"&method=2&instrumentId="+instrumentId,"详细内容",800,400);
	  }
	  function deleteRepair(){
		  var checkedArray = getCheckedArray();
	      var ids = "";
	      if(checkedArray.length==0){
	    	alert("请勾选至少一项数据");
	        return;
	      }else{
	        for(var i=0; i<checkedArray.length;i++){
	          ids += checkedArray[i]+",";
	        }
	        ids = ids.substring(0,ids.length-1);
	      }
	      var r=confirm("确定要删除勾选的数据吗?");
	      if(r==true){
	    	  $.ajax({
	                url:'${URL_QULITITY_DELETEREPAIR}',//删除地址
	                type:'post',
	                data:{ids:ids},
	                async : false, //默认为true 异步
	                error:function(){
	                  alert('error');
	                },
	                success:function(data){
	                  refreshTable();
	                }
	           });
	      }
	  }
    </script>
</head>
<body>
<div id="recordwrap">
    <div class="page-header">
        <!-- /.page-header -->
        <ul class="page_nav">
            <li class="first cur">医卫士云平台&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li class="cur">装机设置&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>维修记录</li>
        </ul>
    </div>
    <h3 style='font: normal 14px/70px "微软雅黑";color: #566278;'>仪器SN &nbsp;&gt;&nbsp;${SN}</h3>
    <div id="date">
        <div class="form-group">
            <label>查看记录:</label>
            <div id="PrevTime" class="input-group date form_date" style="width: 106px"                              data-date-format="yyyy-mm-dd">
                <input id="pTime" class="form-control" type="text" readonly style="text-indent:0">
                <span class="input-group-addon">
                    <span class="glyphicon-calendar">&gt;</span>
                </span>
            </div>
        </div>
        <div class="form-group">
            <label class="To">到</label>
            <div id="NextTime" class="input-group date form_date" style="width: 106px"                              data-date-format="yyyy-mm-dd">
                <input id="nTime" class="form-control" type="text" readonly                       style="text-indent:0">
                <span class="input-group-addon">
                    <span class="glyphicon-calendar">&gt;</span>
                </span>
            </div>
        </div>
        <shiro:hasPermission name="+opeaRepair">
	        <button id="delete_butt" type="button" class="btn btn-outline btn-success" onclick="deleteRepair()" style="float:right;margin-right:10px;background: #35c990;border:none;">删除</button>
	    	<button id="update_butt" type="button" class="btn btn-outline btn-success" onclick="updateRepair()" style="float:right;;margin-right:10px;background: #35c990;border:none;">修改</button>
	    	<button id="add_butt" type="button" class="btn btn-outline btn-success" onclick="addRepair()" style="float:right;;margin-right:10px;background: #35c990;border:none;">新增</button>
    	</shiro:hasPermission>
    </div>
    <div class="tableRecord">
        <table id="recordList" class="display" cellspacing="10" width="100%">
            <thead>
            <tr>
            	<th><input id="all_id" type="checkbox"></th>
                <th>维修时间</th>
                <th>维修人</th>
                <th>故障类别</th>
                <th>维修描述</th>
                <th>维修图片</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<!-- 公共弹出框 start  -->
<div class="modal fade" id="myModalIframe" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>
<!-- 公共弹出框 end -->
<script type="text/javascript">
    var table;
    function initTable() {
       table = $('#recordList').DataTable({
       	"bFilter": false,//去掉搜索框
           "bAutoWidth": true, //自适应宽度
           "sPaginationType" : "full_numbers",
           "ordering": false,//是否允许Datatables开启排序
           "bProcessing" : true,
           "bServerSide" : true,
           "sAjaxSource":"${URL_QULITITY_DEVICEREPAIR}",
           "sAjaxDataProp": "dataList",//查询后，返回的集合
           "fnServerData": function ( sSource, aoData, fnCallback ) {  //查询条件
               aoData.push(
                       { "name": "PrevTime", "value": $("#pTime").val() },
                       { "name": "NextTime", "value": $("#nTime").val() },
                       { "name": "instrumentId", "value": "${instrumentId}" }
               );
               $.ajax( {
                 "dataType": 'json',
                 "url": sSource,
                 "type":'post',
                 "data": aoData,
                 "success": fnCallback
               } );

            },
           
           "aoColumns" : [{
               "targets": -1,
               "data": null,
               "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                 $(nTd).html('' +
                         '&nbsp;&nbsp;<input name="id" value="'+oData.id+'" type="checkbox" onClick="isCheckedAll()">' +
                         '');
               }
             },{
	                 "mDataProp" : "repairTime"
	         },{
              "mDataProp" : "repairMan"
             },{
                 "targets": 2,
                 "data": null,
                 "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
     	           	if(sData.repairType == "001"){
     	           		$(nTd).html("操作不当");
     	           	}else if(sData.repairType == "002"){
     	           		$(nTd).html("开关机异常");
     	           	}else if(sData.repairType == "003"){
     	           		$(nTd).html("充值异常");
     	           	}else if(sData.repairType == "004"){
     	           		$(nTd).html("屏幕异常");
     	           	}else if(sData.repairType == "005"){
     	           		$(nTd).html("开关门异常");
     	           	}else if(sData.repairType == "006"){
     	           		$(nTd).html("温度异常");
     	           	}else if(sData.repairType == "007"){
     	           		$(nTd).html("样本测试异常");
     	           	}else if(sData.repairType == "008"){
     	           		$(nTd).html("质控测试异常");
     	           	}else if(sData.repairType == "009"){
     	           		$(nTd).html("试剂异常");
     	           	}
                 }
             }, {
           	 "mDataProp" : "repairDesc"
             }, {
            	 "targets": 4,
                 "data": null,
                 "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                	 $(nTd).html(showImg(oData.imgCount,oData.repairImg));
                    }
             } ],
           "oLanguage": {//插件的汉化
               "sLengthMenu": "每页显示 _MENU_ 条记录",
               "sZeroRecords": "抱歉， 没有找到",
               "sInfo": "当前显示 _START_ 到 _END_条 ,共 _TOTAL_ 条记录",
               "sInfoEmpty": "没有数据",
               "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
               "oPaginate": {
                   "sFirst": "首页",
                   "sPrevious": "上一页",
                   "sNext": "下一页",
                   "sLast": "末页"
               },
               "sZeroRecords": "没有检索到数据",
               "sProcessing": "<img src='' />",
               "sSearch": "搜索"
           },
           "lengthChange":false,
           "lengthMenu": [5]
       } );
     }
    $(document).ready(function(){
    	initDateTime("#NextTime");
    	initDateTime("#PrevTime");
    	initTable();
    	$('#recordList_info').parent().addClass('showPage');
    	$('#recordList_previous').parent().addClass('pageNow');
    	$('.fancybox').fancybox();
    });
    function initDateTime(id){
        var t = $(id).datetimepicker({
            language:  'zh-CN',
            weekStart:  0,
            todayBtn: true,
            autoclose:  1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
        t.on('changeDate', function(ev){
        	refreshTable();
        });
    }
  //多选按钮
    $("#all_id").click(function(){
      if(this.checked){
        $("input[name='id']").each(function(){
          $(this)[0].checked = true;
        });
      }else{
        $("input[name='id']").each(function(){
          $(this)[0].checked = false;
        });
      }
    });

    //判断是否已经全选
    function isCheckedAll(){
      var isCheckAll = true;
      $("input[name='id']").each(function(){
        if(!this.checked){
          isCheckAll = false;
        }
      });
      if(isCheckAll){
        $("#all_id")[0].checked = true;
      }else{
        $("#all_id")[0].checked = false;
      }
    }

    function getCheckedArray(){
      var checkedArray = [];
      $("input[name='id']").each(function(){
        if(this.checked){
          checkedArray.push(this.value);
        }
      });
      return checkedArray;
    }
    function showImg(imgCount,repairImg){
    	if(repairImg == null || repairImg == null){
    		return "";
    	}
    	var arr = repairImg.split(";");
    	var str = "";
    	for(var i=0;i<imgCount;i++){
    		var s = "http://"+window.location.host+arr[i].substr(arr[i].indexOf("/appdownloads"),arr[i].length);
    		if(i == 0){
    			str+='<a class="fancybox" href="'+s+'" data-fancybox-group="gallery" title="图'+(i+1)+'">'+imgCount+'</a>';	
    		}else{
    			str+='<a class="fancybox" href="'+s+'" data-fancybox-group="gallery" title="图'+(i+1)+'"></a>';	
    		}
    		
    	} 
    	return str;
    }
</script>
</body>
</html>